<template>
  <div class="app-container">
      <el-table :data="tableData"   style="width: 100%">
      <el-table-column  prop="_id"   label="id"    width="200">    </el-table-column>
      <el-table-column prop="index" label="序号" width="130">       </el-table-column>
      <el-table-column   prop="name" label="菜品名称" width="130">                  </el-table-column>
      <el-table-column prop="serie.name"  label="分类" width="130">             </el-table-column>
      <el-table-column  prop="price"   label="价格"  width="120">   </el-table-column>
      <el-table-column  label="是否上架" width="120">
     <template  slot-scope="scope"> 
      <el-switch
            v-model="scope.row.status"
            @change="offchange(scope.row)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
     </template>
  </el-table-column>

      <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" round  @click="modifyTheserie(scope.row)"  >编辑</el-button>
            <el-button type="danger" round @click="delserie(scope.row)">删除</el-button>
          </template>
      </el-table-column>
    </el-table>

  <el-dialog title="修改" :visible.sync="dialogFormVisible">
  <el-form :model="form">

    <el-form-item label="序号" :label-width="formLabelWidth">
      <el-input v-model="form.index" autocomplete="off"></el-input>
    </el-form-item>

   <el-form-item label="名称" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item label="分类" :label-width="formLabelWidth" v-if='form.serie'  >
            <el-select v-model="form.serie._id" placeholder="请选择">
            <el-option v-for="item in classification" :key="item._id" :label="item.name"  :value="item._id">
            </el-option>
          </el-select>
  </el-form-item>

    <el-form-item label="价格" :label-width="formLabelWidth">
        <el-input v-model="form.price" autocomplete="off"></el-input>
   </el-form-item>
    
     <el-form-item label="是否上架" :label-width="formLabelWidth">
          <el-switch
              v-model="form.status"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
      </el-form-item>


  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel" >取 消</el-button>
    <el-button type="primary" @click="determineserie">确 定</el-button>
  </div>
</el-dialog>

  </div>
</template>

<script>
import {listserie} from '@/api/serie'
import { dishlist, dishupdate,dishdel} from '@/api/dish'
export default {
  data(){
    return{
       dialogFormVisible:false,
      tableData:[{  }],
      form:{},
      formLabelWidth:'120px',
      classification:[]
    }
  },
  mounted(){
    //通过此方法调用接口
    //把获取到的值赋值给页面
    dishlist().then(res=>{
      // console.log(res);
      this.tableData=res.data
    }),
    //通过此方法调用接口
    //把获取到的值赋值给分类
    listserie().then(res=>{
      this.classification =res.data
    })
  },
  methods:{
    //点击是否上架的时候调用此方法
    offchange(rst){
      //通过此方法把是否上架状态更新
     dishupdate({id:rst._id,status:rst.status}).then(res=>{
       console.log(res); }).catch(err=>{
        //当更新不成功的时候把修改的status取反后赋值
        obj.status = !obj.status
       })
    },
    //点击编辑的时候触发此方法
    modifyTheserie(obj){
      // console.log(obj);
         //让修改的菜单显示
        this.dialogFormVisible = true
        //点击对应的值赋值给form
        this.form = obj
        // console.log(this.form);
    },
    determineserie(){
      //修改菜单点击确定的时候触发此方法
      //更新数据
    dishupdate({id:this.form._id,...this.form}).then(res=>{
      //让修改菜单隐藏
          this.dialogFormVisible  = false
      //在让页面更新一次显示的是修改后的值
     dishlist().then(res=>{  console.log(res); this.tableData=res.data }),
     //提示修改成功
    this.$message({ type: 'success',message: '修改成功!'  }); })

    },
    // 点击删除的时候触发此方法
    delserie(obj){ 
      //出现应该提示框
    this.$confirm('此操作为删除该桌子, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
       }).then(() => {
           //点击确定删除的时候
           //调用删除的接口
             dishdel({id:obj._id}).then(res=>{
              //提示删除成功
                this.$message({    type: 'success', message: '删除成功!'});
                // console.log(res);
                //重新获取数据
                //重新渲染页面
            dishlist().then(res=>{ this.tableData = res.data  })})        
          // console.log(obj);
          //取消删除的时候提示
          }).catch(() => {  this.$message({  type: 'info',    message: '已取消删除'   }); })
          },
    cancel(){
      
       this.dialogFormVisible  = false
      dishlist().then(res=>{ this.tableData = res.data  })
    }
    


  }

}
</script>

<style>

</style>